<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <!-- 基础信息 -->
  <meta charset="utf-8">
  <!--页面头部添加-->
  <meta name="referrer" content="no-referrer" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <!-- 强制 HTTPS -->
  <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="force-rendering" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#424242">
  <meta name="description" content="一个展示项目的主页">
  <meta name="keywords" content="Miate,金玉白菜,个人博客,个人主页">
  <meta name="author" content="Miate">

  <title>Miateの主页</title>
  <!-- jQuery -->
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
  <!-- HarmonyOS Sans -->
  <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
  <!-- 引入样式 -->
  <link rel="stylesheet" type="text/css"
    href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <link rel="stylesheet" type="text/css" href="./css/mobile.css">
  <link rel="stylesheet" type="text/css" href="./css/loading.css">
  <link rel="stylesheet" type="text/css" href="./css/animation.css">
  <link rel="icon" href="./img/icon/192.png">
  <link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
  <!-- Izitoast -->
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/css/iziToast.min.css">
  <script type="text/javascript"
    src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
    </script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css">
  <!-- Aplayer -->
  <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2WVH35V11W"></script>
  <!-- <script src="./js/Meting.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
  <!-- IE Out -->
  <script>
    if ( /*@cc_on!@*/ (!!window.MSInputMethodContext && !!document.documentMode)) {
      window.location.href = "/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
    }

    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-2WVH35V11W');
  </script>
  <!-- PWA -->
  <!-- <script>
      function loadJson() {
        let xhr = new XMLHttpRequest();
        xhr.overrideMimeType('application/json');
        xhr.open('GET', './config/manifest.json', true);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
          }
        }
        xhr.send();
      }
    </script> -->
</head>

<body>
  <div id="app">
    <!-- 加载动画 -->
    <div id="loading-box">
      <div class="loading-left-bg"></div>
      <div class="loading-right-bg"></div>
      <div class="spinner-box">
        <div class="loader">
          <div class="inner one"></div>
          <div class="inner two"></div>
          <div class="inner three"></div>
        </div>
        <div class="loading-word">
          <p class="loading-title" id="loading-title">{{ Config.title }}</p>
          <span id="loading-text">加载中</span>
        </div>
      </div>
    </div>
    <section id="section" class="section">
      <!-- 背景图片 -->
      <div class="bg-all">
        <img id="bg" onerror="this.classList.add('error')">
        <div class="cover"></div>
      </div>
      <!-- 鼠标指针 -->
      <div id="g-pointer-1"></div>
      <div id="g-pointer-2"></div>
      <!-- 主体 -->
      <main id="main" class="main">
        <div class="container" id="container">
          <div class="row" id="row">
            <div class="col left">
              <!-- 基本信息 -->
              <div class="main-left">
                <!-- logo -->
                <div class="main-img">
                  <img id="logo-img" :src="Config.logo_img" alt="img">
                  <div class="img-title">
                    <span class="img-title-big" id="logo-text-1">{{ Config.logo_text_1 }}</span>
                    <span class="img-text" id="logo-text-2">.{{ Config.logo_text_2 }}</span>
                  </div>
                </div>
                <!--介绍信息-->
                <div class="message cards" id="switchmore">
                  <div class="des" id="des">
                    <i class="fa-solid fa-quote-left"></i>
                    <div class="des-title">
                      <span id="change">Hello&nbsp;World&nbsp;!</span>
                      <br />
                      <span id="change1">{{ Config.change1 }}</span>
                    </div>
                    <i class="fa-solid fa-quote-right"></i>
                  </div>
                </div>
                <!--社交链接-->
                <div class="social" id="social" style="padding-left: 4px">
                  <a v-for="item in Config.socialList" :href="item.url" class="link" :id="item.id" target="_blank">
                    <i :class="item.icon"></i>
                  </a>
                  <a id="link-text">通过这里联系我</a>
                </div>
              </div>
            </div>
            <!-- 第二屏 logo -->
            <div class="logo cards" style="display: none;" id="changemore">
              <a class="logo-text" id="logo-text-small">{{ Config.logo_text_small }}</a>
            </div>
            <div class="col right">
              <div class="main-right">
                <!-- 功能区 -->
                <div class="row rightone" id="rightone">
                  <div class="col hitokotos">
                    <!-- 一言 -->
                    <div class="hitokoto cards" id="hitokoto">
                      <!-- 打开音乐 -->
                      <div class="open-music fixed-top" id="open-music">
                        <i class="fa-solid fa-compact-disc"></i>
                        <span>&nbsp;打开音乐播放器</span>
                      </div>
                      <!-- 切换音乐 -->
                      <div class="hitokoto-all">
                        <div class="hitokoto-text">
                          <span id="hitokoto-text">距离，不过是一段空间</span>
                        </div>
                        <div class="hitokoto-from">
                          -「&nbsp;<span id="from-text">無名</span>&nbsp;」
                        </div>
                      </div>
                    </div>
                    <!-- 音乐 -->
                    <div class="music" id="music">
                      <div class="music-all">
                        <div class="music-button">
                          <div id="music-open">音乐列表</div>
                          <div id="music-close">回到一言</div>
                        </div>
                        <div class="music-control">
                          <i class="fa-solid fa-backward-step" id="last"></i>
                          <div id="play">
                            <i class="fa-solid fa-play"></i>
                          </div>
                          <i class="fa-solid fa-forward-step" id="next"></i>
                        </div>
                        <div class="music-menu">
                          <div class="music-text">
                            <span id="music-name">未播放音乐</span>
                          </div>
                          <div class="music-volume" style="display: none;">
                            <div id="volume-ico">
                              <i class="fa-solid fa-volume-low"></i>
                            </div>
                            <input type="range" min="0" max="1" step="0.01" value="0.5" id="volume">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col times">
                    <!-- 时间 -->
                    <div class="time cards" id="upWeather">
                      <div class="timeshow" id="time">
                        2000&nbsp;年&nbsp;0&nbsp;月&nbsp;00&nbsp;日&nbsp;
                        <span class="weekday">星期一</span>
                        <br>
                        <span class="time-text">00:00:00</span>
                      </div>
                      <div class="weather">
                        <span id="city_text">天气</span>&nbsp;
                        <span id="wea_text">加载中</span>&nbsp;
                        <span id="tem_text"></span>
                        <span id="win_text">请稍</span>
                        <span id="win_speed">等~</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 分割线 -->
                <div class="line">
                  <i class="fa-solid fa-link"></i>
                  <span class="link-text">网站列表</span>
                </div>
                <!-- 网站链接 -->
                <div class="link">
                  <!-- 第一组 -->
                  <div class="row" v-for="list in Config.linkList" :style="list.style">
                    <div :class="item.class" v-for="item in list.links">
                      <a :id="item.link_id" :href="item.href" target="_blank">
                        <div class="link-card cards">
                          <i :id="item.icon_id" :class="item.icon"></i>
                          <span class="link-name" :id="item.name_id">{{ item.name }}</span>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 展开菜单按钮 -->
          <div class="menu" id="switchmenu">
            <a class="menu-button cards" id="menu">
              <i class="fa-solid fa-bars"></i>
            </a>
          </div>
          <!-- 更多内容 -->
          <div class="more" id="more">
            <!-- 关闭按钮 -->
            <div class="close fixed-top" id="close">
              <i class="fa-solid fa-circle-xmark"></i>
            </div>
            <div class="line" style="margin-top: 1rem;">
              <i class="fa-solid fa-angle-left"></i>
              <span class="line-text">时间胶囊</span>
              <i class="fa-solid fa-angle-right"></i>
            </div>
            <div class="date" id="date">
              <div class="item" id="dayProgress">
                <div class="date-text" style="margin-top: 0rem;">今日已经度过了&nbsp;<span></span>&nbsp;小时
                </div>
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
              <div class="item" id="weekProgress">
                <div class="date-text">本周已经度过了&nbsp;<span></span>&nbsp;天</div>
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
              <div class="item" id="monthProgress">
                <div class="date-text">本月已经度过了&nbsp;<span></span>&nbsp;天</div>
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
              <div class="item" id="yearProgress">
                <div class="date-text">今年已经度过了&nbsp;<span></span>&nbsp;个月</div>
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
            </div>
            <div class="line">
              <i class="fa-solid fa-angle-left"></i>
              <span class="line-text">杂七杂八</span>
              <i class="fa-solid fa-angle-right"></i>
            </div>
            <!--网站链接-->
            <div class="row" v-for="list in Config.twoLinkList" :style="list.style">
              <div :class="item.class" v-for="item in list.links">
                <a :href="item.href" :target="item.target">
                  <div class="link-card cards">
                    <span class="link-name">{{ item.name }}</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <!-- 设置页面 -->
          <div class="box" id="box" style="display: none;">
            <div class="box-wrapper">
              <!--关闭按钮-->
              <div class="closebox fixed-top" id="closemore">
                <i class="fa-solid fa-circle-xmark"></i>
              </div>
              <!--左侧内容-->
              <div class="box-left">
                <div class="img-title">
                  <span class="img-title-big" id="logo-title-other">{{ Config.logo_text_1 }}</span>
                  <span class="img-text" id="logo-title-other-small">.{{ Config.logo_text_2 }}</span><br />
                  <span class="img-text">&nbsp;v&nbsp;{{ Config.version }}</span>
                  <a :href="Config.github" target="_blank">
                    <i class="fa-brands fa-github"></i>
                  </a>
                </div>
                <!--更多内容-->
                <div class="accordion" id="accordion">
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        壁纸设置
                      </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                      data-bs-parent="#accordion">
                      <div class="accordion-body">
                        <div class="set">
                          <div class="wallpaper" id="wallpaper">
                            <div class="form-radio" v-for="item in Config.wallpapers">
                              <input type="radio" class="set-wallpaper" style="display: none;" :id="item.id"
                                :value="item.value" name="wallpaper-type">
                              <label :for="item.for">{{ item.text }}</label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--更新日志-->
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        更新日志
                      </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                      data-bs-parent="#accordion">
                      <div class="accordion-body">
                        <div class="upnote">
                          <span class="uptext" v-for="item in Config.uptexts">
                            <i class="fa-solid fa-circle-plus"></i>&nbsp;{{ item.uptext }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 音乐列表 -->
          <div class="box" id="box-music" style="display: none;">
            <div class="box-wrapper">
              <!--关闭按钮-->
              <div class="closebox fixed-top" id="closemore-music">
                <i class="fa-solid fa-circle-xmark"></i>
              </div>
              <!--左侧内容-->
              <div class="box-left-music" id="box-music-box">
                <!-- Aplayer -->
                <div id="aplayer" :data-id="music.musicPlaylist" :data-server="music.musicServer"
                  :data-type="music.musicType"></div>
              </div>
            </div>
          </div>
      </main>
      <!-- 版权信息 -->
      <footer id="footer" class="fixed-bottom footer">
        <div class="power">
          <span id="power">Copyright&nbsp;&copy;
            <script>
              document.write(new Date().getFullYear());
            </script>
            <a :href="Config.myWeb" id="power-text">{{ Config.Copyright_text }}</a>
          </span>
          <!-- 备案 -->
          <a href="https://beian.miit.gov.cn" target="_blank">&amp;&nbsp;{{ Config.beian }}</a>
        </div>
        <!-- 歌词显示 -->
        <div id="lrc"></div>
      </footer>
    </section>
  </div>

  <!-- 注册一个Service Worker 需要 https sw.js -->
  <script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("./js/sw.js");
      })
    }
  </script>
  <!-- 浏览器 js判断 -->
  <noscript>
    <div class="noscript fixed-top">请开启 JavaScript</div>
  </noscript>
  <!-- JS -->
  <script type="text/javascript" src="./js/vue/vue.min.js"></script>
  <script type="text/javascript" src="./js/js.cookie.js"></script>
  <script type="text/javascript" src="./js/main.js"></script>
  <script type="text/javascript" src="./js/set.js"></script>
  <script type="text/javascript" src="./js/time.js"></script>
  <script type="text/javascript"
    src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js"></script>

</body>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      Config: {},
      music: {}
    },
    created() {
      let url = './config/setting.json'
      $.getJSON(url, (data) => {
        this.Config = data
        if (JSON.parse(localStorage.getItem('config')) !== this.Config) {
          localStorage.setItem('config', JSON.stringify(this.Config))
        }
        // 页头数据
        $('title').text(data.title);
        $('#loading-title').text(data.title);
        $('meta[name="description"]').attr('content', data.description);
        $('meta[name="keywords"]').attr('content', data.keywords);
        $('meta[name="author"]').attr('content', data.author);

        // 音乐播放器
        this.music.server = this.Config.music.musicServer
        this.music.type = this.Config.music.musicType
        this.music.playlist = this.Config.music.musicPlaylist
        this.music.autoplay = this.Config.music.musicAutoplay
        this.music.loop = this.Config.music.musicLoop
      })
    },
    methods: {

    }
  })
</script>

</html>